<template>
  <div>
    myinput1
    <myinput v-model="value"></myinput>

    <span>相当于</span>
    <myinput :modelValue="value"
    @update:modelValue="value = $event"></myinput>
    MyCheckbox:
    <mycheckbox v-model:checked="checked" />
     <!-- 相当于 -->
     <span>相当于</span>
    <mycheckbox :checken="checked" @update:checked="checked = $event"></mycheckbox>

    <hr>

    <h2>vue3.4更新最新写法</h2>
    <child v-model="count"></child>
    <h2>处理 v-model 修饰符</h2>
    <child2 v-model.filterNumber="count2"></child2>
  </div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'vmodelDemo'
})
import myinput from './components/myinput.vue'
import mycheckbox from './components/mycheckbox.vue'
import child from './components/child.vue'
import child2 from './components/child2.vue'

const value = ref('')
const count = ref(1)
const count2 = ref(0)
const checked = ref(false)
</script>

